import { Input } from 'antd';
import styles from './index.module.scss';
import { useEffect, useState } from 'react';
const InputDome = () => {
    const [inputValue, setInputValue] = useState('请输入...');
    const [isComposing, setIsComposing] = useState(false);
    const handleInput = (e: React.ChangeEvent<HTMLInputElement>, isCompose: boolean = true) => {
        if (isComposing && isCompose) return; // 当输入法处于组合状态时，不更新状态
        console.dir(e.target);
        setInputValue(e.target.value);
    };

    const handleStart = (e: React.CompositionEvent<HTMLInputElement>) => {
        setIsComposing(true); // 输入法开始组合输入
    };

    const handleEnd = (e: React.CompositionEvent<HTMLInputElement>) => {
        setIsComposing(false);
        // 这里可以添加一些在组合输入结束后需要执行的操作，但请注意此时 inputValue 可能还未更新
        setInputValue((e.target as HTMLInputElement).value);
        handleInput(e as any, false);
    };
    useEffect(() => {}, []);
    return (
        <div className={styles.container}>
            <div className="input-box">
                <div className="text">{inputValue}</div>
                <Input
                    placeholder="Basic usage"
                    style={{ width: '232px' }}
                    onCompositionStart={(e) => handleStart(e)}
                    onCompositionEnd={(e) => handleEnd(e)}
                    onChange={(e) => handleInput(e)}
                />
            </div>
        </div>
    );
};
export default InputDome;
